<template>
	<view>
		<navbar title="我的收藏" />
		<view class="tabs sticky">
			<up-tabs :list="tabsList" :scrollable="true" :itemStyle="itemStyle" :activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle" lineWidth="30" lineHeight="2" lineColor="#A72530" @click="tabSelect"></up-tabs>
		</view>
		<empty v-if="resultData.list.length === 0" />
		<view class="cl-main">
			<view class="product flex align-item_center" v-for="(item,index) in resultData.list" :key="item.id"
				@click="productDetails(item)">
				<image class="cover flex align-item_center justify-content_center" :src="item.picUrl" mode="aspectFit">
					<!-- <image /> -->
				</image>
				<view class="info">
					<view class="name">{{item.spuName}}</view>
					<!-- <view class="types border-box">型号，颜色，服务</view> -->
					<view class="points flex align-item_center justify-content_space-between">
						<view class="num">
							{{fen2yuan(item.price,(item.point?0:2))}}<text>{{item.point?'积分':"元"}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="110rpx"></u-gap>
	</view>
</template>

<script setup>
	import empty from "@/components/empty.vue"
	import navbar from "@/components/navbar.vue"
	import FavoriteApi from "@/sheep/api/product/favorite.js"
	import {
		fen2yuan,
	} from '@/sheep/hooks/useGoods.js';
	import {
		reactive,
		ref
	} from "vue"
	import {
		itemStyle,
		activeStyle,
		inactiveStyle
	} from "@/common/index.js"
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		navigateTo
	} from "@/utils/tool.js"

	onReachBottom(() => {
		if (resultData.list.length >= resultData.total) return;
		params.pageNo++;
		getPage()
	})

	const productDetails = (item) => {
		if (item.point) {
			navigateTo(`/points/mall_details/index?id=${item.spuId}`)
		} else {
			navigateTo(`/homemaking/details/index?id=${item.spuId}`)
		}
	}

	const tabSelect = (val) => {
		if (val.id === 0) params.point = undefined
		else params.point = val.id

		params.pageNo = 1;
		getPage()
	}

	const tabsList = reactive([{
		name: "全部",
		id: 0
	}, {
		name: "积分",
		id: true
	}, {
		name: "家政",
		id: false
	}])


	const resultData = reactive({
		list: [],
		total: 0
	})
	const params = reactive({
		pageNo: 1,
		pageSize: 10,
		point: undefined
	})
	const getPage = () => {
		FavoriteApi.getFavoritePage(params).then(res => {
			if (params.pageNo === 1) resultData.list = res.data.list;
			else resultData.list = resultData.list.concat(res.data.list);
			resultData.total = res.data.total;
		})
	}

	onLoad(() => {
		getPage()
	})
</script>

<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.tabs {
		z-index: 99;
		top: var(--navbarH);
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		background-color: #F8F3E7;
	}

	.cl-main {
		.product {
			margin: 0 auto 36rpx;
			width: 750rpx - 80rpx;

			.info {
				.points {
					margin-top: 58rpx;

					.count {
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 34.76rpx;
						color: rgba(0, 0, 0, 1);
					}

					.num {
						font-size: 40rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 57.92rpx;
						color: rgba(167, 37, 48, 1);

						text {
							font-size: 24rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 57.92rpx;
							color: rgba(64, 3, 3, 1);
						}
					}
				}

				.types {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					color: rgba(166, 123, 123, 1);
					background: #F8F3E7;
				}

				.name {
					width: 416rpx;
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(64, 3, 3, 1);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.cover {
				width: 160rpx;
				height: 160rpx;
				opacity: 1;
				border-radius: 8rpx;
				background: #FFFFFF;
				margin-right: 16rpx;
				margin-left: 4rpx;

				image {
					width: 128rpx;
					height: 128rpx;
				}
			}
		}
	}

	:deep(.u-tabs__wrapper__nav__item) {
		padding: 0rpx 64rpx !important;
	}
</style>